<template>
  <div class="slot-learn-demo">
    <h1>Vue 插槽学习演示</h1>
    
    <div class="demo-grid">
      <!-- 基础用法演示 -->
      <div class="demo-card">
        <h2>基础插槽用法</h2>
        <SlotLearn>
          <p>这是传入默认插槽的自定义内容！</p>
          <p>可以包含多个元素</p>
        </SlotLearn>
      </div>

      <!-- 具名插槽演示 -->
      <div class="demo-card">
        <h2>具名插槽用法</h2>
        <SlotLearn>
          <template #header>
            <h3 style="color: #007bff;">🎯 自定义头部</h3>
          </template>
          
          <template #content>
            <div style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; padding: 15px; border-radius: 8px;">
              <p>🌟 这是自定义的主要内容区域</p>
              <ul>
                <li>支持任意 HTML 结构</li>
                <li>可以包含组件</li>
                <li>样式完全自定义</li>
              </ul>
            </div>
          </template>
          
          <template #footer>
            <div style="text-align: center; color: #28a745;">
              <strong>✅ 自定义底部 - {{ new Date().toLocaleDateString() }}</strong>
            </div>
          </template>
        </SlotLearn>
      </div>

      <!-- 作用域插槽演示 -->
      <div class="demo-card">
        <h2>作用域插槽用法</h2>
        <SlotLearn>
          <template #user="{ user, index, isActive }">
            <div class="custom-user-card" :class="{ 'user-active': isActive }">
              <div class="user-avatar">{{ user.name.charAt(0) }}</div>
              <div class="user-info">
                <h4>{{ user.name }}</h4>
                <p>用户ID: {{ index }}</p>
                <span class="user-badge" :class="isActive ? 'online' : 'offline'">
                  {{ isActive ? '🟢 在线' : '🔴 离线' }}
                </span>
              </div>
            </div>
          </template>
        </SlotLearn>
      </div>

      <!-- 动态插槽演示 -->
      <div class="demo-card">
        <h2>动态插槽用法</h2>
        <SlotLearn>
          <template #morning>
            <div class="time-card morning">
              <h4>🌅 早上好！</h4>
              <p>新的一天开始了，加油！</p>
            </div>
          </template>
          
          <template #evening>
            <div class="time-card evening">
              <h4>🌙 晚上好！</h4>
              <p>辛苦了一天，好好休息！</p>
            </div>
          </template>
        </SlotLearn>
      </div>

      <!-- 条件插槽演示 -->
      <div class="demo-card">
        <h2>条件插槽用法</h2>
        <SlotLearn>
          <template #premium>
            <div class="premium-card">
              <h3>💎 VIP 专享内容</h3>
              <p>恭喜您是我们的高级用户！</p>
              <ul>
                <li>🎯 专属客服支持</li>
                <li>🚀 优先功能体验</li>
                <li>💰 专享折扣优惠</li>
              </ul>
            </div>
          </template>
        </SlotLearn>
      </div>

      <!-- 产品卡片作用域插槽演示 -->
      <div class="demo-card">
        <h2>复杂作用域插槽用法</h2>
        <SlotLearn>
          <template #product-title="{ product, discount }">
            <div class="custom-product-title">
              <h3>🔥 {{ product.name }}</h3>
              <span class="discount-badge">{{ Math.round((1 - discount) * 100) }}% OFF</span>
            </div>
          </template>
          
          <template #product-content="{ product, formatPrice }">
            <div class="custom-product-content">
              <div class="price-section">
                <span class="current-price">{{ formatPrice(product.price) }}</span>
                <span class="original-price">¥{{ product.price.toFixed(2) }}</span>
              </div>
              <div class="stock-info">
                <span class="stock-label">库存:</span>
                <span class="stock-value" :class="{ 'low-stock': product.stock < 20 }">
                  {{ product.stock }} 件
                </span>
              </div>
            </div>
          </template>
          
          <template #product-actions="{ product, addToCart, buyNow }">
            <div class="custom-actions">
              <button @click="addToCart(product)" class="cart-btn">
                🛒 加入购物车
              </button>
              <button @click="buyNow(product)" class="buy-btn">
                ⚡ 立即购买
              </button>
            </div>
          </template>
        </SlotLearn>
      </div>

      <!-- 插槽传递演示 -->
      <div class="demo-card">
        <h2>插槽传递用法</h2>
        <SlotLearn>
          <template #forwarded="{ message, timestamp, level }">
            <div class="forwarded-content" :class="`level-${level}`">
              <div class="message-header">
                <span class="level-badge">{{ level.toUpperCase() }}</span>
                <span class="timestamp">{{ timestamp }}</span>
              </div>
              <div class="message-body">
                {{ message }}
              </div>
            </div>
          </template>
        </SlotLearn>
      </div>
    </div>
  </div>
</template>

<script setup>
import SlotLearn from '../components/SlotLearn.vue'
</script>

<style scoped>
.slot-learn-demo {
  padding: 20px;
  background: #f8f9fa;
  min-height: 100vh;
}

.slot-learn-demo h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.demo-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.demo-card h2 {
  color: #495057;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
}

/* 自定义用户卡片样式 */
.custom-user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.custom-user-card.user-active {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 15px;
}

.user-info h4 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.user-info p {
  margin: 0 0 8px 0;
  color: #6c757d;
  font-size: 14px;
}

.user-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.user-badge.online {
  background: #d4edda;
  color: #155724;
}

.user-badge.offline {
  background: #f8d7da;
  color: #721c24;
}

/* 时间卡片样式 */
.time-card {
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  color: white;
}

.time-card.morning {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.time-card.evening {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.time-card h4 {
  margin: 0 0 10px 0;
  font-size: 20px;
}

/* 高级卡片样式 */
.premium-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px;
  border-radius: 12px;
}

.premium-card h3 {
  margin: 0 0 15px 0;
}

.premium-card ul {
  list-style: none;
  padding: 0;
}

.premium-card li {
  padding: 5px 0;
}

/* 产品标题样式 */
.custom-product-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-badge {
  background: #dc3545;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

/* 产品内容样式 */
.custom-product-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.price-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #dc3545;
}

.original-price {
  font-size: 16px;
  color: #6c757d;
  text-decoration: line-through;
}

.stock-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-value.low-stock {
  color: #dc3545;
  font-weight: bold;
}

/* 自定义按钮样式 */
.custom-actions {
  display: flex;
  gap: 10px;
}

.cart-btn, .buy-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cart-btn {
  background: #6c757d;
  color: white;
}

.cart-btn:hover {
  background: #5a6268;
}

.buy-btn {
  background: #007bff;
  color: white;
}

.buy-btn:hover {
  background: #0056b3;
}

/* 转发内容样式 */
.forwarded-content {
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid;
}

.forwarded-content.level-info {
  background: #d1ecf1;
  border-color: #17a2b8;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.level-badge {
  background: #17a2b8;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.timestamp {
  font-size: 12px;
  color: #6c757d;
}

.message-body {
  font-weight: 500;
}
</style>